<template>
	<view class="application-item">
		<uni-section type="line" titleFontSize="16px" v-if="title" :title="title"></uni-section>
		<view class="application-item-content">
			<u-grid :border="false" @click="handleClick" col="2">
				<u-grid-item v-for="(item, index) in appList" :key="index" :name="item.path" @touchstart="touchstart" @touchend="touchend(item)">
					<view class="grid-item">
						<image :src="getImageSrc(item)" class="grid-img"></image>
						<view class="grid-text">{{ item.name }}</view>
						<up-badge v-if="mainStore.showTip && !item.tip && ![].includes(item.name)" :absolute="true" :offset="[-10,20]" :value="title === '快捷入口' ? '-' : '+'" @click.stop></up-badge>
						<view class="tip" v-if="mainStore.showTip && item.tip"> 已添加 </view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	import {
		useMainStore
	} from '@/store/index.js'
	import _ from 'lodash'
	// 卡片组件
	const mainStore = useMainStore()
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		appList: {
			type: Array,
			default: () => []
		}
	})
	const handleClick = (item) => {
		if ((touchE.value - touchT.value) > 350) return
		if (item) {
			if (item == '/pages/application/application') {
				uni.switchTab({
					url: item
				})
			} else {
				uni.navigateTo({
					url: item
				});
			}
		} else {
			// uni.showModal({
			// 	content: "页面开发中..."
			// })
			uni.showToast({
				icon:'error',
				title: '页面开发中...',
			});
		}
	}
	const getImageSrc = ({
		icon,suffix
	}) => {
		if(icon.includes('.')){
			return `/static/img/work/${icon}`
		}else{
			return `/static/img/work/${icon}.jpg`
		}
	};
	let touchT = ref(''),
		touchE = ref('')
	const touchstart = () => {
		touchT.value = new Date().getTime()
	}
	const touchend = (item) => {
		touchE.value = new Date().getTime()
		if (['双重预防', '四员两长', '高危作业'].includes(item.name)) {
			return
		}
		if ((touchE.value - touchT.value) > 350) {
			setTimeout(() => {
				mainStore.showTip = true
			}, 300)
		}
		if (mainStore.showTip) {
			mainStore.overlay = true
			fastFn(item)
		}
	}
	// 快捷入口
	const fastFn = (item) => {
		let operName = ''
		if (props.title === '快捷入口') {
			mainStore.deleteFast(item)
			operName = '移除'
		} else {
			console.log(item);
			mainStore.getFast(_.cloneDeep(item))
			item.tip = true
			operName = '添加'
		}
		uni.showToast({
			title: `${operName}成功`,
			icon: "success",
		});
	}
</script>
<style lang="scss" scoped>
	.application-item {
		background: #fff;
		// box-shadow: 0 0 5px 2px #2172FC;
		margin-bottom: 16rpx;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 10px;
		width: 100%;

		.application-item-title {
			color: $title-color;
			box-sizing: border-box;
			font-size: 30rpx;
			font-weight: bold;
		}

		:deep(.uni-section-header) {
			padding: 0px !important;

			.uni-section-header__decoration.line {
				height: 16px;
			}

			.uni-section__content-title {
				color: #2172FC !important;
				font-weight: bold;
			}
		}

		.application-item-content {
			box-sizing: border-box;
			margin-top: 20rpx;
			margin-bottom: -14px;

			.grid-item {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				height: 160rpx;
				width: 100%;

				// animation: overly 2s cubic-bezier(.1, .25, 1, .25) forwards;
				// animation-play-state: running;
				.grid-img {
					width: 80rpx;
					height: 80rpx;
				}

				.grid-text {
					flex: 1;
					// height: 30rpx;
					color: $text-color;
					font-size: 12px;
					text-align: center;
					width: 80%;
					margin-top: 12rpx;
				}
			}
		}
	}

	:deep(.u-badge) {
		position: relative;
		animation: badgeAni 2s cubic-bezier(.1, .25, 1, .25) forwards;
		pointer-events: auto
	}

	.tip {
		font-size: 12px;
		color: gainsboro;
		position: absolute;
		top: -10px;
		right: 0px;
	}

	@keyframes overly {
		from {
			transform: rotate(0deg);
		}

		4% {
			transform: rotate(5deg);
		}

		12.5% {
			transform: rotate(-5deg);
		}

		21% {
			transform: rotate(5deg);
		}

		29% {
			transform: rotate(-5deg);
		}

		37.5% {
			transform: rotate(5deg);
		}

		46% {
			transform: rotate(-5deg);
		}

		50%,
		to {
			transform: rotate(0deg);
		}
	}

	@keyframes badgeAni {
		0% {
			z-index: 100;
		}

		50% {
			z-index: 1000;
		}

		100% {
			z-index: 119999;
		}
	}
</style>